<template>
  <view class="container">
    <CommonHead :userInfo="state.userInfo"/>
    <view class="content">
      <view class="tabsMain">
        <view class="left">
          <uni-icons type="left" size="30" style="margin-left: 20rpx;" @click="goBack"></uni-icons>
          <text>订单市场</text>
        </view>
        <view class="subTitle">请询问企业微信管理员获取订单详情！</view>
        <view class="tabs">
          <view :class="['tab', item.id == state.currentId ? 'tabHover' : '']" @click="getList(1,item.id)" v-for="(item, index) in state.tabs" :key="index">
            <text>{{item?.name}}</text>
          </view>
        </view>
      </view>
      <view class="list">
        <view v-for="item in state.filteredItems" :key="item.id" :class="item.type == 1 ? 'list-item' : 'list-item-yellow'">
          <view class="list-item-content">
            <view class="itemTop">
              <text class="subId">{{ item?.order_no }}</text>
              <text class="title">{{ item?.name }}</text>
            </view>
            <text class="tags">
              技术需求：
              <text v-if="item?.software_ask_one">{{item?.software_ask_one}}</text>
              <text v-if="item?.software_ask_two">{{item?.software_ask_two}}</text>
              <text v-if="item?.software_ask_three">{{item?.software_ask_three}}</text>
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import CommonHead from './components/head.vue'
import { getOrderMark } from '@/utils/teacher.js'
import { onShow } from '@dcloudio/uni-app'

const state = reactive({
  tabs:[{
    id: "",
    name:'全'
  }, {
    id: 1,
    name:'工'
  }, {
    id: 2,
    name:'文'
  }],
  currentId: null,
  userInfo: {}
})
onShow(() => {
  getList(1, "")
  state.userInfo = uni.getStorageSync('userInfo')
})
const goBack = () => {
  uni.navigateBack()
}

const getList = (page, type) => {
  state.currentId = type
  let params = {
    page: 1,
    limit: 20,
    type: type
  }
  getOrderMark(params).then((res) => {
    state.filteredItems = res?.result?.list
  })
}
</script>

<style scoped lang="scss">
.container {
  width: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 714rpx;
  border-radius: 14rpx;
  background: #ffffff;
  margin-top: 30rpx;
  .tabsMain{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 30rpx;
    .left{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      text{
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 30rpx;
        text-align: center;
        color: rgba(35, 35, 35, 1)
      }
    }
    .subTitle{
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 20rpx;
      color: rgba(60, 60, 60, 1);
      margin-top: 40rpx;
      margin-bottom: 40rpx;
    }
    .tabImg{
      width: 60rpx;
      height: 60rpx;
      margin-right: 20rpx;
    }
    .tabs {
      display: flex;
      justify-content: space-around;
      margin-bottom: 16rpx;
      .tab {
        padding: 4rpx 20rpx;
        border-radius: 4rpx;
        margin-right: 30rpx;
        border: 2rpx solid rgba(107, 107, 107, 1);
        font-size: 24rpx;
      }
      .tabHover{
        background: rgba(209, 218, 243, 1);
        border: 2rpx solid rgba(11, 105, 218, 1);
        color: rgba(11, 105, 218, 1);
      }
      .tab:last-child {
        margin-right: 0;
      }
    }
  }
  .tableTitle{
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-right: 50rpx;
    font-family: HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 24rpx;
    color: rgba(122, 122, 122, 1);
    margin-top: 20rpx;
  }
}




.list {
  background-color: #fff;
  border-radius: 8px;
  margin-top: 20rpx;
  height: 1000rpx;
  overflow: auto;
}
.list-item {
  width: 618rpx;
  padding: 16rpx;
  background: rgba(209, 243, 241, 1);
  margin-bottom: 20rpx;
  border-radius: 6rpx;
}
.list-item-hover{
  width: 618rpx;
  padding: 16rpx;
  margin-bottom: 20rpx;
  background: rgba(255, 125, 90, 1);
  border-radius: 6rpx;
}
.list-item-yellow{
  width: 618rpx;
  padding: 16rpx;
  margin-bottom: 20rpx;
  background: rgba(243, 227, 209, 1);
  border-radius: 6rpx;
}

.list-item-content {
  display: flex;
  justify-content: space-between;
  position: relative;
  flex-direction: column;
  .msgNums{
    padding: 16rpx;
    border-radius: 100%;
    color: #ffffff;
    font-family: HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20rpx;
    left: 30rpx;
  }
  .itemTop{
    display: flex;
    flex-direction: row;
    text{
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 20rpx;
      text-align: center;
      color: rgba(60, 60, 60, 1);
    }
    .subId{
      width: 160rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;     
    }
    .title{
      width: 240rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;     
    }
    .date{
      color: rgba(255, 33, 33, 1);
    }
  }
  .biankuang{
    position: absolute;
    width: 28rpx;
    height: 26rpx;
    border-radius: 6rpx;
    border: 2rpx solid rgba(11, 105, 218, 1);
    right:30rpx;
    top: 30rpx;
  }
}

.tags {
  display: flex;
  width: 466rpx;
  height: 34rpx;
  border-radius: 14rpx;
  background: rgba(247, 247, 247, 1);
  color: rgba(60, 60, 60, 1);
  font-size: 16rpx;
  margin-top:20rpx;
  justify-content: center;
  align-items: center;
}

.tags text {
  margin-right: 16rpx;
  padding: 8rpx 16rpx;
  
}
</style>